<template>
  <view class="topay-content">
    <view class="topay-address">
      <view class="bottom-type">
        <text class="type-address">外卖</text>
        <text class="type-address" >到店</text>
      </view>
      <view class="current-type">
        <text v-if="isshow" class="show-type type-address">外卖</text>
        <text v-else class="show-type type-address">到店</text>
      </view>

      <view class="topay-address-info" v-if="isshow">
        <view class="topay-address-user">
          <view>
            {{ selectaddress.address }}
          </view>
          <view>
            <text> {{ selectaddress.username }}</text>
            <text> {{ selectaddress.sex }}</text>
            <text> {{ selectaddress.phone }}</text>
          </view>
        </view>
        <view class="topay-goto-time">
          <text>立即送出</text>
          <text>大约{{ gototime }}送达 <text class="iconfont icon-you"></text></text>
        </view>
      </view>
    </view>
    <view class="payfoods-info">
      <view class="store-name">{{ payoder.store_name }}<text class="iconfont icon-you"></text></view>
      <view :class="['pay-food-ul',showall?'':'showsome']">
        <view
          class="pay-food-li"
          v-for="itemli in payoder.orderfoods"
          :key="itemli.food_id"
        >
          <image :src="itemli.food_img" mode="aspectFit"></image>

          <view class="li-content">
            <view class="li-content-desc">
              <text>{{ itemli.food_name }}</text>
              <text>￥{{ itemli.food_price * itemli.addnum }}</text>
            </view>
            <view class="li-content-addnum"
              >x
              {{ itemli.addnum }}
            </view>
          </view>
        </view>
      </view>
      <text class='showmore'
      @click="showallclick"
        >{{showall?'收起':'展示更多'}}
        <text v-if="showall" class="iconfont icon-shang"></text>
        <text v-else class="iconfont icon-xia"></text>
      </text>
      <view>
        <view class="send-fei">
          <text>配送费</text>
          <text>¥ 2</text>
        </view>
      </view>
    </view>
    <view class="fixe-footer">
      <text class="allcount-pay">
        ￥
        <text>{{ countprice+2 }}</text>
      </text>
      <text class="goto-pay-btn repay">找人付</text>
      <text class="goto-pay-btn selfpay" @click="gotopaysccusse">去支付</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      showall:false,
      isshow: true,
      useraddress: 1,
      items: ["选项卡1", "选项卡2", "选项卡3"],
      styles: [
        {
          value: "button",
          text: "按钮",
          checked: true,
        },
        {
          value: "text",
          text: "文字",
        },
      ],
      colors: ["#007aff", "#4cd964", "#dd524d"],
      current: 0,
      colorIndex: 0,
      activeColor: "#007aff",
      styleType: "button",
      isselected: true,
      title: "提交订单",
      addressdata: [
        {
          id: 1,
          address: "四川省成都市武侯区国家西部信息安全",
          username: "zhahh",
          sex: "先生",
          phone: 120202002,
          isdefalut: true,
        },
        {
          id: 2,
          address: "四川省成都市武侯区国家西部信息安全",
          username: "zhahh",
          sex: "先生",
          phone: 120202002,
          isdefalut: false,
        },
        {
          id: 3,
          address: "四川省成都市武侯区国家西部信息安全",
          username: "zhahh",
          sex: "先生",
          phone: 120202002,
          isdefalut: false,
        },
        {
          id: 4,
          address: "四川省成都市武侯区国家西部信息安全",
          username: "zhahh",
          sex: "先生",
          phone: 120202002,
          isdefalut: false,
        },
      ],
      selectaddress: {},
      //订单
      payoder: {
        username: "王者",
        userid: 12,
        totalpay: 200,

        oder_id: 1,
        oder_store_id: 1,
        response_time_max: 32,
        store_name: "小猫西餐",
        orderfoods: [
          {
            food_id: 1,
            food_name: "核桃坚果沙拉1",
            food_price: 68,
            addnum: 2,
            food_img: "/static/foods3.jpg",
          },
          {
            food_id: 2,
            food_name: "核桃坚果沙拉2",
            food_price: 68,
            addnum: 1,
            food_img: "/static/foods4.jpg",
          },
          {
            food_id: 4,
            food_name: "核桃坚果沙拉3",
            food_price: 68,
            addnum: 2,
            food_img: "/static/foods6.jpg",
          },
           {
            food_id: 5,
            food_name: "核桃坚果沙拉4",
            food_price: 33,
            addnum: 1,
            food_img: "/static/foods5.jpg",
          },
        ],
      },
    };
  },
  computed: {
    countprice() {
      console.log("su");
      let su = this.payoder.orderfoods.reduce((sum, e) => {
        sum = sum + e.food_price * e.addnum;
        return sum;
      }, 0);
      console.log("su");
      console.log(su);
      return su;
    },
    gototime(){
      return "12:23"
    }
  },
  onLoad(options) {
    let arr = this.addressdata.filter((item) => item.isdefalut === true);
    this.selectaddress = arr[0];
    console.log(this.selectaddress);
  },
  created() {},

  methods: {
    showallclick(){
      console.log(this.showall)
      this.showall=!this.showall
    },
    onClickItem(e) {
      if (this.current !== e.currentIndex) {
        this.current = e.currentIndex;
      }
    },

   
    gotopaysccusse(){
uni.navigateTo({
        url: "../paysccuess/paysccuess?paycountmoney="+this.countprice,
      });
    }
  },
};
</script>

<style scoped>
.topay-content {
  padding: 28rpx;
  background-color: rgb(241, 241, 241);
}
.topay-address-title {
  padding: 20rpx;
  width: 50%;
  background-color: rgb(248, 248, 248);
}
.topay-address {
  position: relative;
}
.topay-address-info {
  margin-top: 80rpx;
  width: 100%;
  /* height: 300rpx; */
  padding: 40rpx;

  box-sizing: border-box;
  background-color: white;
  box-shadow: 10rpx 10rpx 8rpx rgb(229, 231, 233),
    -10rpx -6rpx 8rpx rgb(229, 231, 233);
  border-radius: 16rpx;
}
.type-address {
  display: inline-block;
  font-size: 28rpx;
  width: 50%;
  box-sizing: border-box;
  height: 60rpx;
  line-height: 60rpx;
  border-radius: 16rpx 16rpx 0 0;
  text-align: center;
  background-color: rgb(248, 248, 248);
}
.bottom-type {
  position: absolute;
  z-index: 0;
  left: 0;

  top: -60rpx;
  border-radius: 16rpx 16rpx 0 0;
  background-color: rgb(248, 248, 248, 0);
  width: 98%;
  display: flex;
  box-shadow: -8rpx -4rpx 8rpx rgb(229, 231, 233);
  justify-content: center;
}

.current-type {
  position: absolute;
  width: 100%;
  z-index: 5;
  height: 60rpx;
  line-height: 60rpx;
  top: -68rpx;
  left: 0;
  /* margin-top: -16rpx; */
  border-radius: 16rpx;
  background-color: rgba(255, 255, 255, 0);
}
.show-type {
  display: inline-block;
  width: 48%;
  text-align: center;
  color: #000;

  border-radius: 16rpx 16rpx 0 0;
  height: 0;
  background-color: rgb(248, 248, 248, 0);
  border-bottom: 80rpx solid white;

  border-right: 40rpx solid transparent;
}
/* .show-type::after {
  height: 0;
  width: 120px;
  border-bottom: 120px solid #ec3504;
  border-left: 60px solid transparent;
  border-right: 60px solid transparent;
} */
.topay-address-user {
  padding: 20rpx 0 40rpx;
  border-bottom: 1px solid rgb(238, 237, 237);
}
.topay-address-user > view:nth-of-type(1) {
  height: 40rpx;
  margin-bottom: 20rpx;
  /* 禁止换行，省略显示 */
  font-weight: bold;
  color: rgb(49, 49, 49);
}
.topay-address-user > view:nth-of-type(2) {
  font-size: 24rpx;
  color: rgb(112, 112, 112);
}
.topay-address-user > view:nth-of-type(2) > text {
  margin-right: 16rpx;
}
.topay-goto-time {
  display: flex;
  justify-content: space-between;
  font-size: 24rpx;
  letter-spacing: 4rpx;
  margin-top: 40rpx;
  color: rgb(112, 112, 112);
}
.icon-you{
  font-size: 24rpx;
  margin-left: 10rpx;
  color: rgb(184, 184, 184);
}
.topay-goto-time text:nth-of-type(2) {
  color: rgb(0, 162, 255);
}
.payfoods-info {
  margin: 30rpx  0 120rpx;
  padding: 30rpx;
  width: 100%;
  box-shadow: 2rpx 2rpx 10rpx rgb(229, 231, 233);
  box-sizing: border-box;
  background-color: rgb(255, 255, 255);
  border-radius: 16rpx;
}
.payfoods-info .store-name {
  color: rgb(119, 119, 119);
  font-size: 28rpx;
  padding: 20rpx 0 30rpx;
  border-bottom: 1px solid rgb(229, 231, 233);
}

.fixe-footer {
  position: fixed;
  z-index: 999;
  left: 0;
  bottom: 10rpx;
  line-height: 100rpx;
  display: flex;
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
  height: 100rpx;
  justify-content: space-between;
  border-radius: 100rpx;
  box-shadow: 12rpx 12rpx 20rpx rgb(229, 231, 233),
    -12rpx -6rpx 20rpx rgb(229, 231, 233);
}
.goto-pay-btn {
  display: inline-block;
  width: 25%;
  text-align: center;
}
.repay {
  background: rgb(71, 71, 71);
  color: rgb(255, 208, 92);
}
.selfpay {
  background: rgb(255, 208, 92);
  color: rgb(71, 71, 71);
}
.allcount-pay {

  display: inline-block;
  width: 50%;
  padding-left: 40rpx;
  color: white;
  background-color: rgb(25, 25, 25);
  box-sizing: border-box;
}
.allcount-pay > text {
  font-size: 32rpx;
}

/*  */
.pay-food-ul {
  width: 100%;

  overflow: hidden;
}
.pay-food-ul.showsome{
     height: 500rpx;
}
.pay-food-li {
  height: 120rpx;
  display: flex;
  justify-content: space-between;
  margin: 40rpx 0;
}
.pay-food-li > image {
  display: inline-block;
  width: 30%;
  height: 100%;
}
.li-content{
   font-size: 28rpx;
  width: 70%;
  box-sizing: border-box;
  padding: 20rpx;
  display: flex;
  justify-content:space-between;
  flex-direction: column;
}
.li-content-desc{
  display: flex;
  justify-content: space-between;
 
}
.li-content-addnum{
   font-size: 24rpx;
   color: rgb(160, 159, 159);
}
.send-fei {
  display: flex;
  justify-content: space-between;
}
.showmore {
  display: block;
  border: 1px solid rgb(218, 218, 218);
  border-radius: 8rpx;
 
cursor: pointer;
  width:30%;
  height: 60rpx;
  line-height: 60rpx;
  text-align: center;
  font-size: 28rpx;
  color: rgb(83, 83, 83);
    margin: 20rpx auto;
}

.showmore .iconfont{
  color: rgb(133, 133, 133); 
  margin-left: 4rpx;
  font-size: 28rpx;

}


</style>
